<template>
  <!-- 新建工艺版本的第一个弹窗 -->
  <el-dialog width="600px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body class="six">
    <div v-for="(processName, index) in processNameList" :key="index">
      <el-row v-if="index % 4 == 0">
        <el-col :span="6" v-if="index < processNameList.length">
          <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteProcess(processNameList[index])">{{ processNameList[index] }} </el-button>
        </el-col>
        <el-col :span="6" v-if="index + 1 < processNameList.length">
          <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteProcess(processNameList[index + 1])">{{ processNameList[index + 1] }} </el-button>
        </el-col>
        <el-col :span="6" v-if="index + 2 < processNameList.length">
          <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteProcess(processNameList[index + 2])">{{ processNameList[index + 2] }} </el-button>
        </el-col>
        <el-col :span="6" v-if="index + 3 < processNameList.length">
          <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteProcess(processNameList[index + 3])">{{ processNameList[index + 3] }} </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="footer">
      <el-button id="btnC8Cancel" @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { deleteProcess } from '@/api/process'

const vuexProcess = namespace('TwoProcess')

@Component({
  components: {}
})
export default class CreateProcessDialog extends Vue {
  // TODO 获取工序列表 接口可拆分
  @vuexProcess.Action PREDATA_VERSION: any
  @vuexProcess.State processNameList: any

  visible: boolean = false
  title: string = '管理工序'

  open() {
    this.PREDATA_VERSION()
    this.visible = true
  }
  close() {
    this.visible = false
  }

  deleteProcess(value: any) {
    this.$confirm('确认删除工序：' + value, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.deleteProcessApi(value)
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
  }

  async deleteProcessApi(value) {
    let res = await deleteProcess({ processName: value })
    if (res) {
      this.PREDATA_VERSION()
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.six {
  .el-row {
    margin-bottom: 20px;
  }
  .footer {
    border-top: 1px solid #eee;
    padding: 10px 20px;
    background: #fefefe;
    text-align: center;
  }
}
</style>
